<template>
    <div>
        <div class="cirle"></div>
        <div class="m-4">
            <div class="center">
                <div class="top">
                    <div class="tleft"></div>
                    <div class="tright">
                        <div class="item" v-for="(item, index) in 20" :key="index">
                            <h3>商品名称</h3>
                            <button>-</button>
                            <button @click="click($event, index)" :class="`btn${index}`">+</button>
                        </div>
                    </div>
                </div>
                <div class="down">
                    <div class="box"></div>
                </div>
                <div class="element" v-for="(element, index) in elements" :key="element.id" :style="{
                    top: element.startY + 'px',
                    right: element.startX + 'px',
                    '--translate-y': element.translateY + 'px'
                }" @animationend="removeElement(element?.id)"></div>
            </div>
        </div>
    </div>
</template>




<script setup>
import { ref } from 'vue';

const elements = ref([]);


const click = ($event, index) => {

    const button = $event.target; // 获取点击的按钮元素
    const buttonRect = button.getBoundingClientRect(); // 获取按钮的位置信息
    // console.log(buttonRect,'buttonRect')
    const buttonHeight = buttonRect.height; // 获取按钮的高度
    const buttonTop = buttonRect.top - 54; // 获取按钮相对于视口顶部的距离
    const buttonRight = buttonRect.right;
    const buttonLeft = buttonRect.left;
    const buttonWidth = buttonRect.width;

    // 计算按钮中心点的垂直位置
    const centerY = buttonTop + buttonHeight / 3;
    const centerX = buttonRight - buttonLeft + buttonWidth / 1.5;


    const startX = centerX;
    const startY = centerY;
    const endY = window.innerHeight - startY - 60;
    const newElement = { startX, startY, translateY: endY, id: Date.now() + index };
    elements.value.push(newElement);
};

const removeElement = (id) => {
    elements.value = elements.value.filter(element => element.id !== id);
};


</script>




<style lang="scss" scoped>
@keyframes moveY {
    0% {
        transform: translateY(0);
    }



    40% {
        transform: translateY(-50px);
    }

    100% {
        /* var(--translate-y) */
        transform: translateY(var(--translate-y));
    }
}

@keyframes moveX {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-190px);
    }
}

/* .cirle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #e2c2c2, #ff0000);
} */
button {
    cursor: pointer;
}

.center {
    width: 350px;
    height: 90vh;
    border: 1px solid #000;
    margin: 0 auto;
    position: relative;

    .element {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        animation: moveX 0.4s cubic-bezier(0.42, 0, 0.58, 1);

        &::after {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: red;
            animation: moveY 0.4s cubic-bezier(0.42, 0, 0.58, 1);
        }
    }

    .top {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tleft {
            width: 35%;
            height: 100%;
        }

        .tright {
            width: 65%;
            height: 100%;
            background-color: #bbb;
            overflow-y: scroll;

            .item {
                width: 100%;
                text-align: center;

                button {
                    width: 50px;
                }
            }
        }
    }

    .down {
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: 0;
        background-color: #ccc;

        .box {
            width: 50px;
            height: 100%;
            background-color: #aaa;
            margin-left: 50px;
        }
    }
}
</style>
